<template>
  <div>
    <!-- 轮播图 -->
    <Banner class="banner-box" :carousel="carousel" v-loading="carouselLoading"/>
    <!-- 热门推荐 -->
    <hot :hot-item="hotItem" v-loading="hotDataLoading"/>
    <!-- 目录课程 -->
    <div v-for="(item, index) in categoryLessonList" :key="index">
      <big-row-tabs :item="item" v-if="index % 2 === 0"/>
      <row-tabs :item="item" v-else/>
    </div>
  </div>
</template>

<script>
  import {ref} from "vue"
  import { getRecommendLesson, getHotLesson } from "../../api/index"
  import {findCategoryList, toTree} from "@/api/learn/category"
  import Banner from "../module/banner"
  import hot from "../module/hot";
  import rowTabs from "../module/rowTabs";
  import bigRowTabs from "../module/bigRowTabs";
  import {getCarousel} from "@/api/setting/carousel";
  export default {
    name: "LearnIndex",
    components: {
      rowTabs,
      bigRowTabs,
      hot,
      Banner
    },
    setup() {
      // 导航栏
      const carouselLoading = ref(true)
      const carousel = ref({})
      getCarousel({}, (res) => {
        const carouselJsonStr = res.carouselJson;
        if (carouselJsonStr) {
          carousel.value = JSON.parse(carouselJsonStr);
        }
        carouselLoading.value = false
      }).catch(() => {
        carouselLoading.value = false
      })
      // 热门推荐
      const hotItem = ref({
        id: 0,
        name: "热门推荐",
        contentList: [],
        moduleLinkList: []
      })
      const hotDataLoading = ref(true)
      const loadRecommendLesson = function() {
        hotDataLoading.value = true
        getRecommendLesson({}, res => {
          hotItem.value.contentList = res
          hotDataLoading.value = false
        }).catch(() => {
          hotDataLoading.value = false
        })
      }
      loadRecommendLesson();
      // 分类推荐
      const categoryLessonList = ref([])
      const loadCategory = async function() {
        await findCategoryList(0, true, async (res) => {
          const categoryList = toTree(res)
          if (categoryList && categoryList.length) {
            for (const category of categoryList) {
              const categoryChildrenList = []
              await getHotLesson({cid: category.value, isShowIndex: true}, async res => {
                const categoryChildren = {name: "最新", id: category.value, contentList: res}
                categoryChildrenList.push(categoryChildren)
                if (category.children && category.children.length) {
                  for (const child of category.children) {
                    await getHotLesson({cid: child.value, isShowIndex: true}, childRes => {
                      for (const p of categoryLessonList.value) {
                        if (p.id === category.value) {
                          p.children.push({name: child.label, id: child.value, contentList: childRes});
                          break
                        }
                      }
                    })
                  }
                }
              })
              categoryLessonList.value.push({
                name: category.label,
                id: category.value,
                children: categoryChildrenList
              });
            }
          }
        })
      }
      loadCategory();
      return {
        hotItem,
        hotDataLoading,
        categoryLessonList,
        carousel,
        carouselLoading
      }
    }
  }
</script>
<style scoped lang="scss">
  .banner-box {
    margin: 20px auto;
    width: calc(100% - 20px);
    min-width: calc(100% - 20px);
    border-radius: 4px;
    //box-shadow: 0 1px 1px #ececec;
  }
</style>
